<template>
    <div>
        <h1>康复理疗显示</h1>
        食谱标题 <input type="text" v-model="shi.name">

        分类<select v-model="shi.Fenlei">
                            <option value="">请选择</option>
                            <option :value="item.Fname" v-for="item in fen" :key="item.Id">{{item.Fname}}</option>
                        </select>
        <button class="btn btn-success" @click="chaxun">查询</button>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>菜谱标题</td>
                    <td>菜谱封面</td>
                    <td>标签</td>
                    <td>分类</td>
                    <td>发布类型</td>
                    <td>发布时间</td>
                    <td>菜谱详情</td>
                </tr>
                <tr v-for="item in hht" :key="item.Id">
                    <td>{{item.Id}}</td>
                    <td>{{item.Caibiaoti}}</td>
                    <td><img :src="item.Fengmian" width="100" height="100"></td>
                    <td>{{item.Biaoqian}}</td>
                    <td>{{item.Fenlei}}</td>
                    <td>{{item.Leixng==true?'立即发布':'预订发布'}}</td>
                    <td>{{moment(item.FaTime).format("YYYY-MM-DD")}}</td>
                    <td>{{item.Xiangqing}}</td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';

const router=useRouter();
const route=useRoute();

let shi:any=reactive({
    name:'',
    Fenlei:''
})

let hht:any=ref([])


let fen:any=ref([])

onMounted(()=>{
    fenlei()
    chaxun()

})

//获取菜谱数据
const chaxun=()=>{
    console.log(hht);
    
    axios({
        url:'/api/House/CaipuList',
        method:'get',
        params:shi
        
    }).then(res=>{
        console.log(res);
        hht.value=res.data
       
    }).catch(err=>{
        console.log(err);
        
    })
}


//获取分类值
const fenlei=()=>{
    console.log(fen);
    axios({
        url:'/api/House/FenleiList',
        method:'get',
        
    }).then(res=>{
        console.log(res);
        fen.value=res.data
       
    }).catch(err=>{
        console.log(err);
        
    })
}




</script>

<style scoped>
button{
    margin: 0 5px;
}
span{
    margin: 0 5px;
}
</style>